<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>Egret</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="full-screen" content="true" />
    <meta name="screen-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="360-fullscreen" content="true" />
    <style>
        html,
        body {
            -ms-touch-action: none;
            background: #888888;
            padding: 0;
            border: 0;
            margin: 0;
            height: 100%;
        }

        #video-canvas {
            position: fixed;
            top: 0;
            left: 0;
        }
        #P1video{
            width: 100vw;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<script src="../../jsmpeg.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<body>
    <video id="P1video" poster="" style="display: none;" playsinline="true" webkit-playsinline="true"
        x5-video-player-type="h5" x-video-player-fullscreen="true" x-webkit-airplay="true" src="../../1.mp4"></video>
    <canvas id="video-canvas" style="width: 100%;" width="100vw" height="100vh"></canvas>
    <div style="margin: auto;width: 100%;height: 100%;" class="egret-player" data-entry-class="Main"
        data-orientation="portrait" data-scale-mode="fixedWidth" data-frame-rate="30" data-content-width="750"
        data-content-height="1240" data-show-paint-rect="false" data-multi-fingered="2" data-show-fps="false"
        data-show-log="false" data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9">
    </div>
    <script>
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '', // 必填，公众号的唯一标识
            timestamp: '', // 必填，生成签名的时间戳
            nonceStr: '', // 必填，生成签名的随机串
            signature: '',// 必填，签名
            jsApiList: [] // 必填，需要使用的JS接口列表
        });
        wx.error(function (res) {
            let isAndroid = window.navigator.userAgent.match(/android/ig);
                if (isAndroid) { // 
                    console.log('安卓')
                    var canvas = document.getElementById('video-canvas');
                    var url = '../../out2.ts';
                    var player = new JSMpeg.Player(url, {
                        canvas: canvas,
                        autoplay: true,
                    });
                }else{
                    /**
                     * 
                     * ffmpeg -i 1.mp4  -f mpegts -codec:v mpeg1video -b:v 3500k -vf scale=750:-1 -codec:a mp2 out.ts
                    */
                    // 请注意，使用HTML元素（内部JSMpeg.VideoElement）提供了一些JSMpeg.Player之上的功能。即SVG暂停/播放按钮和在iOS设备上“解锁”音频的能力。
                    // url参数接受一个MPEG .ts文件或WebSocket服务器（ws://...）的URL。
                    // options参数支持以下属性：
                    // canvas - 用于视频渲染的HTML Canvas元素。如果没有给出，渲染器将创建自己的Canvas元素。
                    // loop - 是否循环播放视频（仅适用于静态文件）。默认为true。
                    // autoplay - 是否立即开始播放（仅适用于静态文件）。默认为false。audio - 是否解码音频。默认为true。
                    // video - 是否解码视频。默认为true。poster - 在视频播放之前显示的海报图像的URL。
                    // pauseWhenHidden - 标签页处于非活动状态时是否暂停播放。默认为true。请注意，浏览器通常会降低非活动标签页上的JS执行速度。
                    // disableGl - 是否禁用WebGL并始终使用Canvas2D渲染器。默认为false。
                    // disableWebAssembly - 是否禁用WebAssembly并始终使用JavaScript解码器。默认为false。
                    // preserveDrawingBuffer - 是否使用preserveDrawingBuffer创建WebGL上下文 - 对通过canvas.toDataURL()进行“截图”必要。默认为false。
                    // progressive - 是否以块的形式加载数据（仅适用于静态文件）。启用时，可以在整个源完全加载之前开始播放。默认为true。
                    // throttled - 在使用progressive时，是否在播放尚不需要的块时延迟加载。默认为true。
                    // chunkSize - 在使用progressive时，一次加载的块大小（以字节为单位）。默认为10241024（1MB）。
                    // decodeFirstFrame - 是否解码并显示视频的第一帧。可用于设置Canvas大小并将帧用作“海报”图像。在使用autoplay或流媒体源时，此选项无效。默认为true。
                    // maxAudioLag - 在流媒体播放时，音频排队的最大长度（以秒为单位）。
                    // videoBufferSize - 在流媒体播放时，视频解码缓冲区的大小（以字节为单位）。默认为5121024（512KB）。对于非常高的比特率，您可能需要增加这个值。
                    // audioBufferSize - 在流媒体播放时，音频解码缓冲区的大小（以字节为单位）。默认为128*1024（128KB）。对于非常高的比特率，您可能需要增加这个值。
                    // onVideoDecode(decoder, time) - 在每个已解码和渲染的视频帧后调用的回调函数。
                    // onAudioDecode(decoder, time) - 在每个已解码的音频帧后调用的回调函数。
                    // onPlay(player) - 在播放开始时调用的回调函数。
                    // onPause(player) - 在播放暂停时调用的回调函数（例如调用.pause()或源已结束）。
                    // onEnded(player) - 在播放已达到源的末尾时调用的回调函数（仅当loop为false时调用）。
                    // onStalled(player) - 每当没有足够的数据进行播放时调用的回调函数。
                    // onSourceEstablished(source) - 在源首次接收到数据时调用的回调函数。
                    // onSourceCompleted(source) - 在源接收到所有数据时调用的回调函数。
                    // 除canvas之外的所有选项也可以通过data-属性与HTML元素一起使用。例如，在JavaScript中指定循环和自动播放：
                    // var player = new JSMpeg.Player('video.ts' {loop: true, autoplay: true});或者HTML中
                    // <div class="jsmpeg" data-url="video.ts"data-loop="true" data-autoplay="true"></div>请注意，当作为数据属性使用时，
                    // camelCased选项必须使用连字符。例如，decodeFirstFrame: true变为data-decode-first-frame="true"用于HTML元素。
                    // JSMpeg.Player APIJSMpeg.Player实例支持以下方法和属性：
                    // .play() - 开始播放.pause() - 暂停播放.stop() - 停止播放并跳转到开头.nextFrame() - 推进一个视频帧的播放。
                    // 这不会解码音频。成功返回true，当没有足够的数据时返回false。.volume - 获取或设置音频音量（0-1）
                    // .currentTime - 获取或设置当前播放位置（以秒为单位）.paused - 只读属性，表示播放是否暂停.destroy() - 停止播放，
                    // 断开源连接并清理WebGL和WebAudio状态。之后将无法使用播放器。如果播放器创建了canvas元素，则会从文档中删除它。
                   var p1 =  document.getElementById("P1video")
                   p1.style.display = 'block'
                   p1.play()
                }
        });
        var loadScript = function (list, callback) {
            var loaded = 0;
            var loadNext = function () {
                loadSingleScript(list[loaded], function () {
                    loaded++;
                    if (loaded >= list.length) {
                        callback();
                    }
                    else {
                        loadNext();
                    }
                })
            };
            loadNext();
        };

        var loadSingleScript = function (src, callback) {
            var s = document.createElement('script');
            s.async = false;
            s.src = src;
            s.addEventListener('load', function () {
                s.parentNode.removeChild(s);
                s.removeEventListener('load', arguments.callee, false);
                callback();
            }, false);
            document.body.appendChild(s);
        };

        var xhr = new XMLHttpRequest();
        xhr.open('GET', './manifest.json?v=' + Math.random(), true);
        xhr.addEventListener("load", function () {
            var manifest = JSON.parse(xhr.response);
            var list = manifest.initial.concat(manifest.game);
            loadScript(list, function () {
                /**
                 * {
                 * "renderMode":, //Engine rendering mode, "canvas" or "webgl"
                 * "audioType": 0 //Use the audio type, 0: default, 2: web audio, 3: audio
                 * "antialias": //Whether the anti-aliasing is enabled in WebGL mode, true: on, false: off, defaults to false
                 * "calculateCanvasScaleFactor": //a function return canvas scale factor
                 * }
                 **/
                egret.runEgret({
                    renderMode: "webgl", audioType: 0, calculateCanvasScaleFactor: function (context) {
                        var backingStore = context.backingStorePixelRatio ||
                            context.webkitBackingStorePixelRatio ||
                            context.mozBackingStorePixelRatio ||
                            context.msBackingStorePixelRatio ||
                            context.oBackingStorePixelRatio ||
                            context.backingStorePixelRatio || 1;
                        return (window.devicePixelRatio || 1) / backingStore;
                    }
                });

            });
        });
        xhr.send(null);
    </script>
</body>

</html>